<template>
  <div class="agrency-date">
    <div class="date-search-box">
      <div class="date-title">生日筛选：</div>
      <div class="date-input">
        <input type="text"
               autocomplete="off"
               placeholder="开始时间"
               name="start"
               readonly
               :value='startDate'
               @click="clickStartInput">
        <input type="text"
               id="end"
               autocomplete="off"
               placeholder="结束时间"
               readonly
               name="end"
               :value='endDate'
               @click="clickEndInput">
      </div>
      <div class="date-confirm"
           @click="SearchData()">确定</div>
    </div>
    <van-popup v-model="showDatePop"
               round
               position="bottom">
      <van-datetime-picker v-if="showStartPick"
                           v-model="curDate"
                           type="date"
                           :min-date="minDate"
                           :max-date="maxDate"
                           @confirm="startDateConfirm"
                           @cancel="dateCancel" />
      <van-datetime-picker v-if="showEndPick"
                           v-model="curDate"
                           type="date"
                           :min-date="minDate"
                           :max-date="maxDate"
                           @confirm="endDateConfirm"
                           @cancel="dateCancel" />
    </van-popup>
  </div>
</template>

<script>
import { formatDay } from '@/utils/index'
import Vue from 'vue'
import { DatetimePicker } from 'vant'
import { Popup } from 'vant'
Vue.use(Popup)
Vue.use(DatetimePicker)
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      showDatePop: false,
      showStartPick: false,
      showEndPick: false,
      curDate: new Date(),
      minDate: new Date(new Date().getFullYear() - 70, 1, 1),
      maxDate: new Date()
    }
  },
  created() {
    // this.init()
  },
  methods: {
    formatTime(time) {
      const t = time.getTime()
      return formatDay(t)
    },
    // 开始时间
    clickStartInput(e) {
      this.showDatePop = true
      this.showStartPick = true
      e.srcElement.blur()
    },
    // 结束时间
    clickEndInput(e) {
      this.showDatePop = true
      this.showEndPick = true
      e.srcElement.blur()
    },
    // 开始日期确定
    startDateConfirm(time) {
      const date = this.formatTime(time)
      this.showDatePop = false
      this.showStartPick = false
      this.startDate = date
    },
    // 结束日期确定
    endDateConfirm(time) {
      const date = this.formatTime(time)
      this.showDatePop = false
      this.showEndPick = false
      this.endDate = date
    },
    // 日期取消
    dateCancel() {
      this.showDatePop = false
      this.showStartPick = false
      this.showEndPick = false
    },
    // 点击查询
    SearchData() {
      if (this.startDate == '') {
        this.$Error('请选择开始时间')
        return false
      }
      if (this.endDate == '') {
        this.$Error('请选择结束时间')
        return false
      }
      this.$emit('SearchData', this.startDate, this.endDate)
    }
  }
}
</script>

<style lang="scss">
.date-search-box {
  padding: 20px;
  margin-top: 20px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .date-title {
    line-height: 66px;
    font-size: 26px;
  }
  .date-input {
    flex: 1;
    display: flex;
    input {
      color: #999;
      width: 196px;
      height: 66px;
      margin-right: 20px;
      padding: 15px 20px;
      border: 2px solid #ededed;
      border-radius: 5px;
      box-sizing: border-box;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .date-confirm {
    width: 124px;
    margin-left: 23px;
    line-height: 66px;
    background: #f30c23;
    border-radius: 5px;
    font-size: 24px;
    text-align: center;
    color: #fff;
  }
}
</style>
